<template>
  <div class="addSwipe">
    <p>添加轮播图</p>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="link" label="link">
        <el-input v-model="form.link" placeholder="请输入链接link"></el-input>
      </el-form-item>
      <el-form-item prop="alt" label="alt">
        <el-input v-model="form.alt" placeholder="请输入图片名称"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          list-type="picture-card"
          :http-request="upload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else><Plus /></el-icon
        ></el-upload>
      </el-form-item>
      <el-form-item prop="img" label="base64">
        <el-input
          v-model="form.img"
          placeholder="图片自动转成base64"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { addSwipe } from "../../service/banner.js";

export default {
  components: {
    Plus,
  },
  data() {
    return {
      imageUrl: "",
      form: {
        link: "",
        alt: "",
        img: "", // base64编码
      },
      rules: {
        link: [
          {
            required: true,
            message: "请输入链接",
            trigger: "blur",
          },
        ],
        alt: [
          {
            required: true,
            message: "请输入alt文本",
            trigger: "blur",
          },
        ],
        img: [
          {
            required: true,
            message: "请选中上传图片",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      let formEl = this.$refs.form; //找到表单元素
      if (!formEl) return;
      formEl.validate((valid) => {
        // /alidate表单校验方法
        //表单校验通过 valid是true 否则 valid是false
        if (valid) {
          // console.log('submit!',this.form)
          addSwipe(this.form).then((res) => {
            // console.log(res)
            if (res.code === "200") {
              //把上传的图片信息存储到仓库里
              this.$router.push("/home/swipemanage/swipelist");
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },

    reset() {},
    upload(file) {
      console.log(file.file);
      if (!["image/jpg", "image/jpeg", "image/png"].includes(file.file.type)) {
        ElMessage({
          message: "格式不正确",
          type: "warning",
        });
        return;
      }
      if (file.file.size / 1024 / 1024 > 2) {
        ElMessage({
          message: "图片太大了",
          type: "warning",
        });
        return;
      }

      //   console.log(file);
      this.imageUrl = URL.createObjectURL(file.file); //预览图片方法1
      // 读取文件
      let fr = new FileReader();
      // 读取这个文件作为Data对象的base64URL
      fr.readAsDataURL(file.file); //读取图片
      fr.onload = (data) => {
        this.form.img = data.currentTarget.result; //把图片存储到img
        // console.log(data.currentTarget.result);
      };
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 100%;
  display: block;
}
p {
  margin-bottom: 20px;
}
.addSwipe {
  width: 400px;
}
.el-upload--picture-card {
  background: skyblue;
}
.el-button:first-child {
  margin-left: 50px;
}

.avatar-uploader > img {
  width: 178px;
  height: 178px;
  border: 1px solid gray;
  margin-left: 20px;
}

/* .el-form-item__label {
  width: 60px;
} */
/* .avatar-uploader .el-upload {
  border: 1px dashed #fff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
} */

/* .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
} */
/* .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
} */
</style>
